<template>
<div id="apps">

    <!-- 首页登录页面 -->
    <el-col :span="8">
      <el-card shadow="hover" style="width:500px"> 
            <el-form
            label-position="right"
            label-width="100px"
            :model="user"
            style="max-width: 460px"
        >
            <el-form-item label-width="330px" label="宿舍打分系统"/>
            <el-form-item label="用户名">
            <el-input v-model="user.username" />
            </el-form-item>
            <el-form-item label="密码">
            <el-input v-model="user.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-radio-group v-model="radio" style="position:realtive;">
                <el-radio label="管理员登录" style="margin-bottom:10px;">管理员登录</el-radio>
                <el-radio label="宿舍长登录">宿舍长登录</el-radio>
                <el-radio label="老师登录">老师登录</el-radio>
                <el-radio label="宿管登录">宿管登录</el-radio>
                <el-radio label="学生会登录">学生会登录</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button style="width:250px" @click="login()">登录</el-button>
            </el-form-item>
        </el-form>
      </el-card>
    </el-col>
     </div>
</template>
<script>
export default {
  // 创建了一个组件，组件的名字为name
  name: 'Home',
  data () {
    return {
      role: '管理员',
      user: {},
      radio: ''
    }
  },
  created () {
  },
  methods: {

      // 登录按钮绑定
      login() {

        if (this.radio === '管理员登录') {

        // 发送登录请求给后端
        this.$http({
            
            // 登录url
            url: "/admin/login",
            params: {

                // 用户名
                username: this.user.username,

                // 密码
                password: this.user.password
            }
        }).then(response => {

           // 存储用户角色信息
           window.sessionStorage.setItem('role', this.radio)

           // 存储用户信息
           window.sessionStorage.setItem('user', JSON.stringify(response.data))
           
           // 登录成功提示
          this.$message({
            message: '登录成功',
            type: 'success'
            });

           // 跳转到主页
           this.$router.push('/home')
        }).catch(error => {

          // 登录失败提示
         this.$message({
          message: '用户名或密码错误',
          type: 'error'
          });
        })
      } else {

        // 发送登录请求给后端
        this.$http({
            
            // 登录url
            url: "/user/login",
            params: {

                // 用户名
                username: this.user.username,

                // 密码
                password: this.user.password
            }
        }).then(response => {

           // 存储用户角色信息
           window.sessionStorage.setItem('role', this.radio)

           // 存储用户信息
           window.sessionStorage.setItem('user', JSON.stringify(response.data))

           // 登录成功提示
          this.$message({
            message: '登录成功',
            type: 'success'
            });

           // 跳转到主页
           this.$router.push('/home')
        }).catch(error => {

          // 登录失败提示
         this.$message({
          message: '用户名或密码错误',
          type: 'error'
          });


        })
    }
  }
}
}
</script>
<style>
#apps {
   position:absolute;top:20%;left:30%;
}
</style>